<template>
  <a-card CLASS="appCard" hoverable @click="doCardClick">
    <template #cover>
      <div
        :style="{
          height: '204px',
          overflow: 'hidden',
        }"
      >
        <img
          :style="{ width: '100%', transform: 'translateY(-20px)' }"
          :alt="app.appIcon"
          :src="app.appIcon"
        />
      </div>
    </template>
    <a-card-meta :title="app.appName" :description="app.appDesc">
      <template #avatar>
        <div
          :style="{ display: 'flex', alignItems: 'center', color: '#1D2129' }"
        >
          <a-avatar
            :size="24"
            :image-url="app.user?.userAvatar"
            :style="{ marginRight: '8px' }"
          />
          <a-typography-text
            >{{ app.user?.userName ?? "无名" }}
          </a-typography-text>
        </div>
      </template>
    </a-card-meta>
  </a-card>
</template>

<script setup lang="ts">
import { defineProps, withDefaults } from "vue";
import API from "@/api";
import { useRouter } from "vue-router";

interface Props {
  app: API.AppVO;
}

/**
 * defineProps<Props>()：这是Vue 3中的一个组合式API，用于定义组件的props。它接收一个泛型参数 Props，表示这个组件的props类型。
 * withDefaults：这是一个函数，用于为props提供默认值。它接收两个参数：defineProps 返回的props对象和默认值的对象。
 */
const props = withDefaults(defineProps<Props>(), {
  app: () => {
    return {};
  },
});
const router = useRouter();
/**
 * props.app.id表示从父组件传递给当前组件的app对象的id属性。这个id属性通常是一个唯一标识符，用于标识特定的应用程序
 */
const doCardClick = () => {
  router.push({
    path: `/app/detail/${props.app.id}`,
  });
};
</script>

<style scoped>
.appCard {
  cursor: pointer;
}

.icon-hover {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  transition: all 0.1s;
}

.icon-hover:hover {
  background-color: rgb(var(--gray-2));
}
</style>
